<template>
 	<view class="content">
 		<swiper class="swiper" :autoplay='autoplay'
		 interval='4000'
		 circular
		 @change="swiperChange"  :current='current'>
 			<swiper-item v-for="(item,index) in list">
 				<view class="swiper-item" :style="{
					'background-image': $img(item.img)
				}">
 					<!-- <view class="swiper-item-text">
						<text>{{item.text1}}</text>
						<text>{{item.text2}}</text>
					</view> -->
 					<view class="swiper-item-img">
 						<image src="https://s4.ax1x.com/2022/03/03/bYm13j.png" mode="aspectFit"></image>
 					</view>
 				</view>
 				<!-- #ifdef MP-WEIXIN-->
 				<view v-if="current!=2" class="jump-overwx" :style="{
					 top:wx.top+wx.height+'px'
				 }" @tap="launchFlag()">{{jumpover}}</view>
 				<!-- #endif -->


 				<!-- #ifdef H5-->
 				<view v-if="current!=2" class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
 				<!-- #endif -->
 			</swiper-item>

 		</swiper>
 		<view class="dian" v-if="current!=2">
 			<text v-for="(item,index) in list" :style="{
				'background':current==index?'#FFFFFF':'rgba(255, 255, 255, 0.5)'
			}"></text>
 		</view>
 		<!-- #ifdef APP-->
 		<text class="lj" v-if="current==2" @tap="launchFlag()">立即体验</text>
 		<!-- #endif -->
 		<!-- ifdef MP-WEIXIN-->
 		<text class="lj1" v-if="current==2&&!token" @click="wxlogin">微信登录</text>
 		<!-- <text class="yz" v-if="current==2" @tap="$to('/pages/login/binding/binding')">验证码登录</text> -->
 		<text class="yz" v-if="current==2" @tap="launchFlag()">立即体验</text>
 		<!-- endif -->
 		<!-- //绑定手机号弹窗 -->
 		<!-- <u-modal v-model="show" :content="'绑定手机号获取更多内容'"></u-modal> -->
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				wx: {},
 				show: true,
				token:'',
 				list: [{
 						// logo:require( '@/static/qdy/logo.png'),'https://s4.ax1x.com/2022/03/03/bJ3ZVI.png
 						img: '',
 						text1: '优质',
 						text2: '优质店铺任你筛选',
 					},
 					{
 						// logo:require( '@/static/qdy/logo.png'),https://s4.ax1x.com/2022/03/03/bJ8kWT.png,https://s4.ax1x.com/2022/03/03/bJ3wzF.png
 						img: '',
 						text1: '品质',
 						text2: '优质店铺任你筛选',
 					},
 					{
 						img: '',
 						text1: '品质',
 						text2: '铺源，求租信息一把抓',
 					}
 				],
 				current: 0,
 				windowHeight: '',
 				background: ['color1', 'color2', 'color3'],
 				autoplay: false,
 				duration: 500,
 				jumpover: '跳过',
				autoplay:true,
 				experience: '立即体验'
 			}
 		},
 		onShow() {
 			this.token = uni.getStorageSync('token')
 		},

 		onLoad() {
 			// uni.getSystemInfo({
 			// 	success(res) {
 			// 		this.windowHeight = res.windowHeight + "px";
 			// 	}
 			// })
 			// #ifdef MP
 			this.wx = wx.getMenuButtonBoundingClientRect()
 			// #endif
 			this.api('Index/openimg').then(res => {
 				let a = []
 				res.data.forEach((v, index) => {
 					a.push({
 						img: v
 					})
 				})
 				this.list = a
 				return
 				if (res.data.length > this.list.length) {
 					this.list.forEach((v, index) => {
 						v.img = res.data[index]
 					})
 				} else {
 					let a = []
 					res.data.forEach((v, index) => {
 						a.push({
 							img: v
 						})
 					})
 					this.list = a
 				}


 			})
 		},
 		methods: {
 			//绑定手机号
 			binding() {

 			},
 			//微信登录
 			wxlogin() {
 				this.$wx_login()
 				// let code = ''
 				// uni.login({
 				// 	provider: 'weixin',
 				// 	success: (loginRes) => {
 				// 		code = loginRes.code
 				// 	}
 				// })
 				// uni.getUserProfile({
 				// 	desc: '獲取您的昵稱、頭像、地區及性別',
 				// 	success: infoRes => {
 				// 		this.api('user/codev2', {
 				// 			code: code
 				// 		}).then(res => {
 				// 			this.api('user/loginv2', {
 				// 				encryptedData: infoRes.encryptedData,
 				// 				iv: infoRes.iv,
 				// 				sessionKey: res.data.session_key,
 				// 				openid: res.data.openid,
 				// 			}).then(v => {
 				// 				if (!v.data.mobile) {

 				// 					return
 				// 				}
 				// 				if (v.code == 1) {
 				// 					this.$toast('登陆成功')
 				// 					uni.setStorageSync('user', v.data)
 				// 					uni.setStorageSync('token', v.data.token)
 				// 					setTimeout(() => {
 				// 						// uni.switchTab({
 				// 						// 	url: "/pages/index/index"
 				// 						// })
 				// 					}, 500)
 				// 				}

 				// 			})
 				// 		})
 				// 	}

 				// })

 			},
 			//轮播图的切换事件
 			swiperChange(e) {
 				this.current = e.target.current
				if(this.current==this.list.length-1){
					this.autoplay=false
				}
 			},
 			launchFlag() {
 				uni.setStorage({
 					key: 'launchFlag',
 					data: true,
 				});
 				uni.switchTab({
 					url: '/pages/index/index'
 				});

 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.yz {
 		position: absolute;
 		bottom: 50rpx;
 		display: inline-block;
 		width: 690rpx;
 		height: 80rpx;
 		left: 50%;
 		transform: translate(-50%);
 		border: 1px solid white;
 		text-align: center;
 		border-radius: 40px;
 		font-size: 30rpx;
 		line-height: 80rpx;
 		font-family: OPPOSans;
 		font-weight: 500;
 		color: #FFFFFF;
 	}

 	.lj1 {
 		position: absolute;
 		bottom: 150rpx;
 		display: inline-block;
 		width: 690rpx;
 		height: 80rpx;
 		left: 50%;
 		transform: translate(-50%);
 		text-align: center;
 		background: #FF1B1B;
 		border-radius: 40px;
 		font-size: 30rpx;
 		line-height: 80rpx;
 		font-family: OPPOSans;
 		font-weight: 500;
 		color: #FFFFFF;
 	}

 	.ljwx {
 		position: absolute;
 		bottom: 50rpx;
 		display: inline-block;
 		width: 690rpx;
 		height: 80rpx;
 		left: 50%;
 		transform: translate(-50%);
 		text-align: center;
 		background: #FF1B1B;
 		border-radius: 40px;
 		font-size: 30rpx;
 		line-height: 80rpx;
 		font-family: OPPOSans;
 		font-weight: 500;
 		color: #FFFFFF;
 	}

 	.lj {
 		position: absolute;
 		bottom: 100rpx;
 		display: inline-block;
 		width: 690rpx;
 		height: 80rpx;
 		left: 50%;
 		transform: translate(-50%);
 		text-align: center;
 		background: #FF1B1B;
 		border-radius: 40px;
 		font-size: 30rpx;
 		line-height: 80rpx;
 		font-family: OPPOSans;
 		font-weight: 500;
 		color: #FFFFFF;
 	}

 	.swiper-item-text {
 		position: relative;
 		top: 170rpx;

 		text {
 			display: block;
 		}

 		text:nth-of-type(1) {
 			font-size: 52rpx;
 			font-family: OPPOSans;
 			font-weight: 500;
 			color: #FFFFFF;
 		}

 		text:nth-of-type(2) {
 			font-size: 30rpx;
 			line-height: 100rpx;
 			font-family: OPPOSans;
 			font-weight: 500;
 			color: #FFFFFF;
 		}
 	}

 	.dian {
 		position: absolute;
 		width: 150rpx;
 		bottom: 150rpx;
 		margin-left: -75rpx;
 		display: flex;
 		justify-content: space-between;
 		left: 50%;

 		text {
 			display: inline-block;
 			width: 20rpx;
 			height: 20rpx;

 			border-radius: 50%;
 		}
 	}

 	page,
 	.content {
 		width: 100%;
 		height: 100%;
 		background-size: 100% auto;
 		padding: 0;
 	}

 	.swiper {
 		width: 100%;
 		height: 100%;
 		background: #FFFFFF;
 	}

 	.swiper-item {
 		justify-content: center;
 		align-items: center;
 		width: 100%;
 		height: 100%;
 		background-size: 100% 100%;
 		background-repeat: no-repeat;
 		text-align: center;
 		position: relative;
 		display: flex;
 		align-items: center;
 		flex-direction: column-reverse
 	}

 	.swiper-item-img {
 		width: 241rpx;
 		height: 112rpx;
 		position: absolute;
 		bottom: 270rpx;
 	}

 	.swiper-item-img image {
 		width: 100%;
 		height: 100%;
 	}

 	.uniapp-img {
 		height: 20%;
 		background: #FFFFFF;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		overflow: hidden;
 	}

 	.uniapp-img image {
 		width: 40%;
 	}

 	.jump-overwx {
 		right: 35upx;
 		top: 140upx;
 	}

 	.jump-over,
 	.jump-overwx,
 	.experience {
 		position: absolute;
 		height: 60upx;
 		line-height: 60upx;
 		padding: 0 40upx;
 		border-radius: 30upx;
 		font-size: 32upx;
 		color: #FFFFFF;
 		background: rgba(255, 255, 255, 0.2);
 		z-index: 999;
 	}

 	.jump-over {
 		right: 35upx;
 		top: 70upx;
 	}

 	.experience {
 		right: 50%;
 		margin-right: -105upx;
 		bottom: 0;
 	}
 </style>
